<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 40%);
            z-index: -1;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.08);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            width: 400px;
            max-width: 90%;
            backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden;
        }

        .login-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(30deg);
            z-index: -1;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h2 {
            color: #fff;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
        }

        .login-header p {
            color: #a0d2ff;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #c0e4ff;
            font-weight: 500;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: rgba(0, 0, 0, 0.2);
            color: white;
        }

        .form-group input:focus {
            outline: none;
            border-color: #00c9ff;
            background-color: rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.2);
        }

        .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .remember-forgot label {
            display: flex;
            align-items: center;
            color: #a0d2ff;
            font-size: 14px;
            cursor: pointer;
        }

        .remember-forgot input[type="checkbox"] {
            margin-right: 5px;
            cursor: pointer;
        }

        .remember-forgot a {
            color: #00c9ff;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            position: relative;
        }

        .remember-forgot a:hover {
            color: #00a3ff;
            text-decoration: none;
        }

        .remember-forgot a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: #00c9ff;
            transition: width 0.3s ease;
        }

        .remember-forgot a:hover::after {
            width: 100%;
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #00c9ff 0%, #0066ff 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #00a3ff 0%, #0055cc 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 201, 255, 0.5);
        }

        .login-btn:hover::before {
            opacity: 1;
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .divider {
            text-align: center;
            margin: 25px 0;
            position: relative;
        }

        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        }

        .divider span {
            background: rgba(255, 255, 255, 0.1);
            padding: 0 15px;
            color: #a0d2ff;
            font-size: 14px;
            position: relative;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            text-decoration: none;
            backdrop-filter: blur(5px);
        }

        .social-btn:hover {
            background: rgba(0, 201, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(0, 201, 255, 0.3);
        }

        .register-link {
            text-align: center;
            color: #a0d2ff;
            font-size: 14px;
        }

        .register-link a {
            color: #00c9ff;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
        }

        .register-link a:hover {
            color: #00a3ff;
        }

        .register-link a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: #00c9ff;
            transition: width 0.3s ease;
        }

        .register-link a:hover::after {
            width: 100%;
        }

        .error-message {
            color: #ff4d6d;
            font-size: 12px;
            margin-top: 5px;
            display: none;
            text-shadow: 0 0 5px rgba(255, 77, 109, 0.3);
        }

        .success-message {
            background: linear-gradient(135deg, #00d2a9 0%, #00a085 100%);
            color: white;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 20px;
            display: none;
            box-shadow: 0 0 15px rgba(0, 210, 169, 0.3);
        }

        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
            }
            
            .login-header h2 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h2>欢迎回来</h2>
            <p>请登录您的账户</p>
        </div>

        <div class="success-message" id="successMessage">
            登录成功！正在跳转...
        </div>

        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名/邮箱</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名或邮箱" required>
                <div class="error-message" id="usernameError"></div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
                <div class="error-message" id="passwordError"></div>
            </div>

            <div class="remember-forgot">
                <label>
                    <input type="checkbox" name="remember" id="remember">
                    记住我
                </label>
                <a href="#" id="forgotPassword">忘记密码？</a>
            </div>

            <button type="submit" class="login-btn">登录</button>
        </form>

        <div class="divider">
            <span>或使用以下方式登录</span>
        </div>

        <div class="social-login">
            <a href="#" class="social-btn" title="微信登录">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.181-.62-.29-1.271-.29-1.94 0-3.581 3.068-6.483 6.859-6.483.527 0 1.054.061 1.563.155.141-.71.453-1.368.905-1.936C17.112 2.692 13.074 2.188 8.691 2.188zM5.761 8.349c-.578 0-1.046-.448-1.046-1.001s.468-1.001 1.046-1.001c.578 0 1.046.448 1.046 1.001s-.468 1.001-1.046 1.001zm5.237 0c-.578 0-1.046-.448-1.046-1.001s.468-1.001 1.046-1.001c.578 0 1.046.448 1.046 1.001s-.468 1.001-1.046 1.001z"/>
                </svg>
            </a>
            <a href="#" class="social-btn" title="QQ登录">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5.955 13.493c-.245.731-.549 1.229-.882 1.629.34.34.68.68 1.02 1.02.211.211.211.526 0 .737-.211.211-.526.211-.737 0-.68-.68-1.361-1.361-2.041-2.041-.34.34-.68.68-1.02 1.02-.211.211-.526.211-.737 0-.211-.211-.211-.526 0-.737.34-.34.68-.68 1.02-1.02-.333-.4-.637-.898-.882-1.629-.211-.632-1.053-.526-1.053.105 0 .34 0 .68.105 1.02-.211.422-.422.844-.633 1.266-.106.211-.316.316-.527.316-.211 0-.422-.105-.527-.316-.211-.422-.422-.844-.633-1.266.105-.34.105-.68.105-1.02 0-.631-.842-.737-1.053-.105-.245.731-.549 1.229-.882 1.629-.34.34-.68.68-1.02 1.02-.211.211-.211.526 0 .737.211.211.526.211.737 0 .68-.68 1.361-1.361 2.041-2.041.34.34.68.68 1.02 1.02.211.211.526.211.737 0 .211-.211.211-.526 0-.737-.34-.34-.68-.68-1.02-1.02.333-.4.637-.898.882-1.629.211-.632 1.053-.526 1.053.105 0 .34 0 .68-.105 1.02.211.422.422.844.633 1.266.106.211.316.316.527.316.211 0 .422-.105.527-.316.211-.422.422-.844.633-1.266-.105-.34-.105-.68-.105-1.02 0-.631.842-.737 1.053-.105.245.731.549 1.229.882 1.629.34.34.68.68 1.02 1.02.211.211.211.526 0 .737-.211.211-.526.211-.737 0-.68-.68-1.361-1.361-2.041-2.041-.34.34-.68.68-1.02 1.02-.211.211-.526.211-.737 0-.211-.211-.211-.526 0-.737.34-.34.68-.68 1.02-1.02z"/>
                </svg>
            </a>
            <a href="#" class="social-btn" title="微博登录">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.194 14.197c0 3.362-4.53 6.424-10.123 6.424C4.48 20.62 0 18.52 0 15.904c0-1.356 1.074-2.92 2.922-4.402 2.45-1.968 5.296-2.847 6.366-1.965.47.388.518 1.14.235 2.01-.856-.328-1.738-.224-2.206.218-.616.57-.648 1.554-.08 2.328.57.774 1.54 1.05 2.155.48.47-.43.55-1.19.308-2.08 1.203 1.42 1.636 3.12 1.224 4.41-.515 1.626-2.184 2.55-3.72 2.06-1.54-.49-2.433-2.06-1.918-3.69.515-1.626 2.184-2.55 3.72-2.06.21.066.414.15.61.25-.188.6-.258 123-.22 1.865.05 1.08.428 2.04 1.01 2.81 1.33 1.71 3.59 2.01 5.3.69 1.71-1.32 2.01-3.58.69-5.29-.92-1.18-2.35-1.74-3.8-1.61z"/>
                </svg>
            </a>
        </div>

        <div class="register-link">
            还没有账户？<a href="Register.html" id="registerLink">立即注册</a>
        </div>
    </div>

    <script>
        // 表单验证和提交
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 清除之前的错误信息
            document.querySelectorAll('.error-message').forEach(msg => {
                msg.style.display = 'none';
                msg.textContent = '';
            });
            
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            let isValid = true;
            
            // 验证用户名
            if (!username) {
                document.getElementById('usernameError').textContent = '请输入用户名或邮箱';
                document.getElementById('usernameError').style.display = 'block';
                isValid = false;
            }
            
            // 验证密码
            if (!password) {
                document.getElementById('passwordError').textContent = '请输入密码';
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            } else if (password.length < 6) {
                document.getElementById('passwordError').textContent = '密码长度至少为6位';
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            }
            
            if (isValid) {
                // 模拟登录请求
                const loginBtn = document.querySelector('.login-btn');
                const originalText = loginBtn.textContent;
                loginBtn.textContent = '登录中...';
                loginBtn.disabled = true;
                
                setTimeout(() => {
                    // 模拟登录成功
                    document.getElementById('successMessage').style.display = 'block';
                    document.getElementById('loginForm').style.display = 'none';
                    
                    setTimeout(() => {
                        // 这里可以添加实际的页面跳转逻辑
                        alert('登录成功！即将跳转到主页...');
                        // window.location.href = '/dashboard';
                    }, 1500);
                }, 1000);
            }
        });
        
        // 忘记密码链接
        document.getElementById('forgotPassword').addEventListener('click', function(e) {
            e.preventDefault();
            alert('即将跳转到密码重置页面...');
            // window.location.href = '/forgot-password';
        });
        
        // 注册链接
        document.getElementById('registerLink').addEventListener('click', function(e) {
            e.preventDefault();
            alert('即将跳转到注册页面...');
            // window.location.href = '/register';
        });
        
        // 社交登录按钮
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const platform = this.getAttribute('title');
                alert(`即将使用${platform}登录...`);
                // 这里可以添加实际的社交登录逻辑
            });
        });
        
        // 输入框焦点效果
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'scale(1.02)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>